
import { ref, onUnmounted } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
// apiCallBack回调函数
export function useObserve (apiCallBack) {
  // 监控跟组件homePAnne了组件是否进入可视区
  // 1 获取监控的元素(组件)
  const target = ref(null)
  // 2 执行监控
  // 1 useIntersectionObserver函数的返回值是对象,对象中的stop方法可以停止监控
  // 可以传3个参数
  //  1 target dom对象
  //  2 isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
  // observerElement 被观察的dom  3可选择option
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 参数1是个数据:结构出数组中对象isIntersecting的值(boorlean)
      // console.log(isIntersecting)
      if (isIntersecting) {
        // 发请求
        // getNew()
        apiCallBack()
        // 只发一次
        stop()
      }
    },
    {
      threshold: 0 // 说明0-1区间 默认＞0 如果想一旦进入可视边界立马执行,就设置为0
    }
  )
  return { target }
}
/*
倒计时方法
@param{*}time d倒计时描述
 */
export function useCountDown (time) {
  // 不开启默认是0
  const countTime = ref(0)
  // pause 停止定时器方法  resume 开始定时器的方法
  const { pause, resume } = useIntervalFn(() => {
    // 自减逻辑
    countTime.value--
    // 到零停止
    if (countTime.value <= 0) {
      pause()
    }
    // 每一秒执行一次
  }, 1000, { immediate: false })
  // 开始计时方法
  function start () {
    if (countTime.value === 0) {
      countTime.value = time
    }
    resume()
  }
  // 组件卸载之后, 清理一下定时器
  onUnmounted(() => {
    pause()
  })
  return { countTime, start, pause }
}
